
import {
    BrowserRouter,
    createBrowserRouter,
    createRoutesFromElements,
    Route,

    RouterProvider, useNavigate,
    MemoryRouter,
    Router, Routes,
    useParams,
    useRoutes
} from "react-router-dom";
import React from 'react';
import { Platform, StyleSheet, Text, TextInput, View, Button, ScrollView, Image } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: Platform.OS === 'ios' ? 50 : 5, margin: 10,
        backgroundColor: 'purple'
    },
    root: {
        flex: 1,
    },
    webView: {
        flex: 1,
    },
    link: {
        padding: 10,
        backgroundColor: 'lightblue',
    },
});


const Home = () => {
    const navigate = useNavigate();
    return (
        <View style={{ backgroundColor: "green", height: 100 }}>

            <Text>Welcome to the home page!</Text>

            <Button title={`go to HomeMessages`} onPress={() => {
                navigate("/messages")
            }} />

            <Button title={`go to HomeTasks`} onPress={() => {
                navigate("/tasks")
            }} />

        </View>
    );
};

const HomeMessages = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'yellow' }}>
            <Text>Outlet Demo: HomeMessages page!</Text>
        </View>
    );
};

const HomeTasks = () => {
    return (
        <View style={{ height: 200, backgroundColor: 'blue' }}>
            <Text>Outlet Demo: HomeTasks page!</Text>
        </View>
    );
};

export function CreateRoutesFromChildrenExample() {


    ///initialEntries:历史漏油
    const router = createBrowserRouter(createRoutesFromElements(


        <Route path="/" element={<Home />} Component={Home}>
            <Route path="messages" element={<HomeMessages />} Component={HomeMessages} />
            <Route path="tasks" element={<HomeTasks />} Component={HomeTasks} />
        </Route>

    ))
        ;


    return (
        <ScrollView style={styles.container}>

            <RouterProvider router={router} fallbackElement={<Text>error</Text>} />


        </ScrollView>);
}
export default CreateRoutesFromChildrenExample;
